import { useRef, useState } from "react";
import ColorThief from "colorthief";
const images = [
    "src/assets/images/ColorThief/1.webp",
    "src/assets/images/ColorThief/2.jpg",
    "src/assets/images/ColorThief/3.jpg",
    "src/assets/images/ColorThief/4.jpg",
];

// 定义一个函数类型，接受鼠标移入事件和序号作为参数
type ImageMouseOverHandler = (
    event: React.MouseEvent<HTMLImageElement, MouseEvent>,
    index: number,
    item: string
) => void;

export default function ColorThiefUse() {
    const domRef: any = useRef(null);
    const firstRef: any = useRef(null);
    const ref: any = useRef([]);
    const colorThief = new ColorThief();
    const [hoverIndex, setHoverIndex] = useState<number>(-1);

    const getMainColor = async (index: number) => {
        const img: any = ref.current[index];
        console.log("img", img);
        let color: any, palette: any;
        if (img.complete) {
            color = colorThief.getColor(img);
            palette = colorThief.getPalette(img, 5);
            applyGradient(palette);
        }
        console.log("color", color);
        console.log("palette", palette);
        firstRef.current.innerText = `排名首位的颜色是rgb(${color.join(
            ","
        )},前五位的颜色还有：${palette
            .slice(1)
            .map((color: any) => `rgb(${color.join(", ")})`)
            .join(", ")}`;
        return palette;
    };
    const applyGradient = (colors: any) => {
        if (domRef.current && colors && colors.length > 0) {
            const gradientColors = colors.map(
                (color: any) => `rgb(${color[0]}, ${color[1]}, ${color[2]})`
            );
            const gradient = `linear-gradient(to right, ${gradientColors.join(
                ", "
            )})`;
            domRef.current.style.background = gradient;
        }
    };

    const handMouseEnter: ImageMouseOverHandler = async (
        e: any,
        index: number,
        item: string
    ) => {
        console.log(e);
        setHoverIndex(index);
        const colors = await getMainColor(index);
        console.log(colors);
    };
    return (
        <div ref={domRef} style={{ marginTop: "-36px" }}>
            <h1>ColorThiefUse</h1>
            <p>这个案例实现了移到某张图片时背景渲染为该图的主要色调。</p>
            <button
                onClick={() => {
                    getMainColor(0);
                }}
            >
                获取第一张图片的主要颜色
            </button>
            <p ref={firstRef}></p>
            <br />
            {images.map((item, index) => (
                <img
                    key={index}
                    src={item}
                    alt=""
                    crossOrigin="anonymous"
                    onMouseEnter={(event) => handMouseEnter(event, index, item)}
                    style={{
                        opacity:
                            hoverIndex === -1
                                ? 1
                                : index === hoverIndex
                                ? 1
                                : 0.2,
                        maxHeight: "300px",
                        width: "40%",
                        margin: "10px",
                    }}
                    ref={(element) => {
                        ref.current[index] = element;
                    }}
                ></img>
            ))}
        </div>
    );
}

